<template>
  <section class="resident-situation">
    <DivShell title="居民安置情况">
      <div class="container">
        <div class="resident-situation-percent">
          <p>
            <label>居民安置总量</label>
            <span>{{reBuildData.staticData.propleSettledTotal}}户</span>
          </p>
          <div>
            <template v-for="(item,index) in HouseTypeList" >
              <div :key="index" :style="`width:${(item.value/reBuildData.staticData.propleSettledTotal)*100}%;background:${item.color};`"></div>
            </template>
          </div>
          <ul>
            <li v-for="(item,index) in HouseTypeList" :key="index">
              <p>
                <i :style="`background:${item.color}`"></i>
                <label>{{item.label}}</label>
              </p>
              <span :style="`color:${item.color}`">{{Math.round((item.value/reBuildData.staticData.propleSettledTotal)*100)}}%</span>
            </li>
          </ul>
        </div>
      </div>
    </DivShell>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'
import DivShell from '@src/components/divShell.vue'
export default {
  name: "ResidentSituation",
  components:{
    DivShell
  },
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      color:['#307FFF','#4AEBE2','#864AEB','#EB7D4A','#FFC700','#FFFFFF'],
      HouseTypeList:[]
    };
  },
  computed: {
    ...mapGetters(['reBuildData']),
  },
  watch:{
    reBuildData: {
      handler(cval, oval) {
        this.setHouseTypeList();
      },
      deep: true
    }
  },
  created(){
    this.setHouseTypeList();
  },
  mounted() {
  
  },
  methods: {
    setHouseTypeList(){
      this.HouseTypeList=[
        {
          label:'已安置',
          value:this.reBuildData.aoiStatist.readySettled,
          color:'#307FFF'
        },
        {
          label:'未安置',
          value:this.reBuildData.aoiStatist.noSettled,
          color:'#4AEBE2'
        },
        {
          label:'待安置',
          value:this.reBuildData.aoiStatist.waitSettled,
          color:'#864AEB'
        },
      ]
    }
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .resident-situation{
    margin-bottom: 18px;
    & .container{
      .resident-situation-percent{
        padding-left: 4px;
        box-sizing: border-box;
        width: 100%;
        &>p{
          display: flex;
          justify-content: space-between;
          label{
            font-size: 14px;
            color: #959DB4;
            margin-bottom: 10px;
          }
          span{
            font-size: 16px;
            background: linear-gradient(to right,#03DCEF,#307FFF);
            -webkit-background-clip:text;
            color: transparent;
          }
        }
        &>div{
          width: 100%;
          height: 5px;
          background-color: #283864;
          display: flex;
          margin-bottom: 20px;
          &>div{
            transition: all .8s;
          }
        }
        &>ul{
          display: flex;
          flex-wrap: wrap;
          &>li{
            width: 28%;
            margin-right: 8%;
            display: flex;
            justify-content: space-between;
            height: 30px;
            line-height: 30px;
            &:nth-of-type(3){
              margin-right: 0;
            }
            &>p{
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #707DA4;
              &>i{
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 8px;
              }
            }
            &>span{
              font-size: 16px;
              color: #307FFF;
            }
          }
        }
      }
    }
  }
</style>
